<template>
  <div>
    <div class="top">
      <div class="pic">
        <p>
          <span>张三</span>
          <span><van-icon name="edit" />我的在线简历</span>
        </p>
        <img
        src="https://img.bosszhipin.com/beijin/upload/avatar/20200427/9743d5e87850e514bb000e463723d7ecb4188d951b0217589d0705d4f22256b0_s.jpg?x-oss-process=image/resize,w_100,limit_0"
        alt=""
      />
      </div>

      <div class="num">
        <p>
          <span>194</span>
          <span>沟通过</span>
        </p>
        <p>
          <span>19</span>
          <span>已投简历</span>
        </p>
        <p>
          <span>0</span>
          <span>面试</span>
        </p>
        <p>
          <span>0</span>
          <span>收藏</span>
        </p>
      </div>
    </div>
    <div class="vip">
      <div class="up">
        <div class="up_left">
          <p>升级VIP专享求职特权</p>
          <p>8项专属特权加倍提升求职效率</p>
        </div>
        <span>去升级<van-icon name="arrow" /></span>
      </div>
      <div class="down">
        <p>
          <van-icon name="aim" />
          <span>简历刷新</span>
          <span>提升曝光</span>
        </p>
        <p>
          <van-icon name="chart-trending-o" />
          <span>竞争力分析</span>
          <span>洞悉竞争</span>
        </p>
      </div>
    </div>

    <div class="fun">
      <h4>常用功能</h4>
      <div class="sbox">
        <p>
          <van-icon name="newspaper-o" />
          <span>在线简历</span>
        </p>
        <p>
          <van-icon name="sign" />
          <span>附件简历</span>
          <span>添加视频剪辑</span>
        </p>
        <p>
          <van-icon name="notes-o" />
          <span>求职意向</span>
        </p>
        <p>
          <van-icon name="shop-collect-o" />
          <span>道具商城</span>
          <span>直豆/其他</span>
        </p>
      </div>
    </div>

    <div class="tisheng">
      <article>
        <nav>
          <p>
            <img src="imgs/tisheng.jpg" alt="" />
            <span>想提升简历曝光？</span>
          </p>
          <p>建议尽快优化你的在线简历</p>
        </nav>
        <img src="imgs/liang.jpg" alt="" />
      </article>
      <div class="btn">
        <span>稍后处理</span>
        <span>去优化</span>
      </div>
    </div>

    <div class="qita">
      <h4>其他功能</h4>
      <nav>
        <p>
          <van-icon name="wap-home-o" />
          <span>个人主页</span>
        </p>
        <p>
          <van-icon name="bullhorn-o" />
          <span>仲裁厅</span>
        </p>
        <p>
          <van-icon name="gift-card-o" />
          <span>就业指导</span>
        </p>
        <p>
          <van-icon name="upgrade" />
          <span>帮助反馈</span>
        </p>
        <p>
          <van-icon name="user-circle-o" />
          <span>我的客服</span>
        </p>
        <p>
          <van-icon name="completed" />
          <span>安全治理</span>
        </p>
        <p>
          <van-icon name="shield-o" />
          <span>防骗指南</span>
        </p>
        <p>
          <van-icon name="bulb-o" />
          <span>关于</span>
        </p>
        <p>
          <van-icon name="chart-trending-o" />
          <span>薪酬查询</span>
        </p>
        <p>
          <van-icon name="tv-o" />
          <span>规则公示</span>
        </p>
      </nav>
    </div>

    <div class="foot">
      <p>客服电话 400-065-5799 工作时间 9:30 - 18:30</p>
      <p>老年人直连热线 400-6616030-5799 工作时间 9:30 - 18:30</p>
      <p>未成年人投诉举报渠道同上</p>
      <p>人力资源服务许可证 营业执照 朝阳区人社局监督电话</p>
    </div>
    <bom-bar />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.top {
  width: 100%;
  height: 2.2rem;
  background: #39c0ba;
  overflow: hidden;
}
.pic {
    width: 90%;
    display: flex;
    justify-content: space-between;
    padding: 0.20rem 0.20rem 0 0.20rem;
    background: #39c0ba;
    position: fixed;
    top: 0;
    z-index: 10;
}
.pic p {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.pic p > span:nth-child(1) {
  font-size: 0.30rem;
  /* color: #fff; */
  margin-bottom: 0.10rem;
}
.pic img {
  width: 0.80rem;
  height: 0.80rem;
  border-radius: 50%;
  background: orange;
}

/* num */
.num {
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin-top: 1.20rem;
}
.num > p {
  display: flex;
  flex-direction: column;
  align-content: center;
}

/* vip */
.vip {
  position: relative;
  margin: 0.10rem 0.20rem;
  height: 0.70rem;
}
.vip > .up {
  width: 90%;
  display: flex;
  justify-content: space-between;
  background: #ffad74;
  padding: 0.16rem;
  border-radius: 0.10rem;
  position: absolute;
  top: -0.40rem;
  z-index: 2;
}
.vip > .up > .up_left > p:nth-child(2) {
  font-size: 0.12rem;
}
.vip > .up > span {
  line-height: 0.30rem;
  height: 0.30rem;
  padding: 0 0.16rem;
  background: #000;
  color: #ffad74;
  font-size: 0.14rem;
  border-radius: 0.40rem;
}
.vip > .down {
  width: 90%;
  display: flex;
  justify-content: space-between;
  background: #fffdca;
  padding: 0.16rem;
  border-radius: 0.10rem;
  position: absolute;
  top: -0.40rem;
  top: 0.20rem;
  z-index: 0;
}
.vip > .down p > i {
  font-size: 0.15rem;
  color: #ffad74;
}
.vip > .down p > span:nth-child(2) {
  font-size: 0.14rem;
  margin: 0 0.04rem;
}

.vip > .down p > span:nth-child(3) {
  font-size: 0.12rem;
  color: #999;
}

/* fun */
.fun {
  padding: 0.10rem 0.20rem;
  display: flex;
  flex-direction: column;
}
.fun > h4 {
  font-weight: bold;
  font-size: 0.14rem;
  margin-bottom: 0.20rem;
}
.fun > .sbox {
  display: flex;
  justify-content: space-between;
}
.fun > .sbox > p {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fun > .sbox > p > i {
  font-size: 0.40rem;
}
.fun > .sbox > p:nth-child(1) > i {
  color: #3c3ce3;
}
.fun > .sbox > p:nth-child(2) > i {
  color: #f5d83c;
}
.fun > .sbox > p:nth-child(3) > i {
  color: #39c0ba;
}
.fun > .sbox > p:nth-child(4) > i {
  color: #eb3353;
}

.fun > .sbox > p > span {
  font-size: 0.12rem;
}
.fun > .sbox > p > span:nth-child(3) {
  color: #999;
}

/* tisheng */
.tisheng {
  margin: 0.10rem 0.20rem;
  padding: 0.14rem;
  background: #aaf5c7;
  border-radius: 0.10rem;
}
.tisheng > article {
  display: flex;
  justify-content: space-between;
}
.tisheng > article > nav > p {
}
.tisheng > article > nav > p > img {
  border-radius: 50%;
  margin-right: 0.08rem;
  vertical-align: middle;
}
.tisheng > article > nav > p:nth-child(2) {
  font-size: 0.14rem;
  margin-top: 0.10rem;
}
.tisheng > article > img {
}
.tisheng > .btn {
  display: flex;
  justify-content: space-around;
  margin: 0.15rem -0.20rem;
}
.tisheng > .btn > span {
  padding: 0.06rem 0.40rem;
  background: #fff;
  border-radius: 0.20rem;
}
.tisheng > .btn > span:nth-child(2) {
  background: #39c0ba;
}

/* qita */
.qita {
  margin: 0 0.20rem;
}
.qita > h4 {
  font-weight: bold;
  font-size: 0.14rem;
  margin: 0.20rem 0;
}
.qita > nav {
  display: flex;
  flex-wrap: wrap;
}
.qita > nav > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.14rem 0.18rem;
  font-size: 0.12rem;
}
.qita > nav > p > i {
  font-size: 0.30rem;
  color: #278173;
}

/* foot */
.foot {
  margin: 0.10rem 0.20rem 0.60rem 0.20rem;
  font-size: 0.12rem;
  color: #ccc;
  text-align: center;
}
</style>